import React, { Component , Fragment } from 'react';
import 'antd/dist/antd.css';
import { Input , Button , List} from 'antd';
import './style.css'
const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
  ];
class TodoListAntd extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show : true
        }
        this.handleToggole = this.handleToggole.bind(this)
    }
    render() {
        return (
            <Fragment>
                <Input placeholder="Basic usage" style={{width:300 , margin:10}}/>
                <Button type="primary">提交</Button>
                <List
                    style={{width:400,margin:10}}
                    header={<div>Header</div>}
                    footer={<div>Footer</div>}
                    bordered
                    dataSource={data}
                    renderItem={item => (
                        <List.Item>
                             {item}
                        {/* <Typography.Text mark>[ITEM]</Typography.Text> */}
                        </List.Item>
                    )}
                />
                {/* <div className={this.state.show ? 'show' : 'hide'}>AxiosTest</div>
                <button onClick={this.handleToggole}>Toggole</button> */}
            </Fragment>
            
        )
    }
    
    handleToggole(){
        this.setState({
            show:!this.state.show
        })
    }
    
}

export default TodoListAntd;